<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">登录</h1>
	</header>
	<div class="mui-content">
		<form id='login-form' class="mui-input-group">
			<div class="mui-input-row">
				<label>账号</label>
				<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
			</div>
			<div class="mui-input-row">
				<label>密码</label>
				<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
			</div>
		</form>
	
		<div class="mui-content-padded">
			<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
		</div>
	</div>
</body>
<script>
	var loginBtn = document.getElementById("login");
	var http_url = "http://172.30.135.1:3300/api/v1.0.1";
	var login_url = http_url + "/login";
	//监听点击事件
	loginBtn.addEventListener("tap",function () {
		var username = document.getElementById("account").value;
		var password = document.getElementById("password").value;
		
		console.log(username);
		console.log(password);
	  	mui.post(login_url,{
			mobile:username,
			password:password
		},function(data){
			//服务器返回响应，根据响应结果，分析是否登录成功；
			console.log(data.toString());
			mui.openWindow({
			    url:'main.html',
			    id:'main.html',
			    styles:{
			      top:'0px', //新页面顶部位置
			      bottom:'0px', //新页面底部位置
			      width:'100%', //新页面宽度，默认为100%
			      height:'100%', //新页面高度，默认为100%
			    },
			    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
			    show:{
			      autoShow:true,//页面loaded事件发生后自动显示，默认为true
			      aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
			    },
			    waiting:{
			      autoShow:true,//自动显示等待框，默认为true
			      title:'正在加载...'//等待对话框上显示的提示内容
			    }
			})
		},'json');
	});
	
</script>
</html>